.support-right {
	.markdown {
		.v-note-wrapper {
			border: none;
		}

	}

	width: 100%;
	min-width: 1200px;
	height: 100%;
	position: relative;

	.support-right_head {
		width: 440px;
		min-height: 0;
		padding: 0 20px 0 0;
		font-size: 18px;
		color: #333;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		outline: none;
	}

	.support-right_posibox {
		position: absolute;
		top: 4px;
		left: 450px;
		right: 0;
		z-index: 999;
		display: flex;
		flex-direction: row;
		align-items: center;

		.support-right_vto {
			flex: 1;
			min-width: 0;
			overflow-x: auto;
			display: flex;
			flex-direction: row;
			align-items: center;

			.support-right_vli {
				display: flex;
				flex-direction: row;
				align-items: center;
				cursor: pointer;
				position: relative;
				padding: 2px 0;
				margin-right: 20px;
				white-space: nowrap;

				.support-right_vimg {
					width: 35px;
					height: 35px;
				}

				.support-right_vicon {
					color: #9DAAC2;
					font-size: 16px;
				}

				.support-right_block {
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					opacity: 0;
					overflow: hidden;

					.el-select {
						height: 100%;
					}
				}

				.support-right_vbox {
					margin-left: 10px;

					.support-right_vt1 {
						font-size: 13px;
						color: #333333;
					}

					.support-right_vt2 {
						font-size: 12px;
						color: #B0BBCE;
						margin-top: 4px;
					}
				}
			}
		}

		.support-right_buts {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.support-right_btadd {
				background-color: red;
				font-size: 12px;
				color: #fff;
				padding: 8px 12px;
				border-radius: 3px;
				cursor: pointer;
			}
		}
	}

	.support-right_box {
		flex: 1;
		min-height: 0;
		overflow: auto;
		padding: 0 40px;

		.box-hed {
			.box-hed_h1 {
				font-size: 18px;
				color: #181c32;
				font-weight: 500;
				cursor: pointer;

				&:hover {
					color: #3699ff;
				}
			}

			.box-hed_ul {
				display: flex;
				align-items: center;
				padding: 10px 0;

				.box-hed_li {
					font-size: 14px;
					color: #bcbbc9;
					margin-right: 10px;
					display: flex;
					align-items: center;

					span {
						display: inline-block;
						width: 8px;
						height: 8px;
						background-color: #f33561;
						border-radius: 8px;
						position: relative;
						margin-right: 6px;

						&::before {
							content: "";
							width: 4px;
							height: 4px;
							border-radius: 4px;
							background-color: #ffffff;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}

					}

					&:nth-child(2) span {
						background-color: #0bc3c5;
					}
				}
			}

		}

		.text-part_ul {
			margin-top: 10px;

			.text-part_li {
				padding: 10px 0;
				font-family: -apple-system,
					BlinkMacSystemFont,
					Segoe UI,
					Helvetica,
					Arial,
					sans-serif,
					Apple Color Emoji,
					Segoe UI Emoji;

				.part_li-top {
					display: flex;

					.part_li-p1 {
						img {
							width: 35px;
							height: 35px;
							border-radius: 4px;
						}
					}

					.part_li-p2 {
						flex: 1;
						min-width: 0;
						padding-left: 10px;

						.li-p2_text {
							font-size: 13px;
							font-weight: 600;
							color: #3f4254;
							display: flex;
							align-items: center;
							line-height: 20px;
							cursor: pointer;

							.li-p2_text-span {
								font-size: 13px;
								color: #b5b5c3;
								display: flex;
								align-items: center;
								margin-left: 8px;
								font-weight: 500;

								span {
									display: inline-block;
									width: 5px;
									height: 5px;
									border-radius: 5px;
									background-color: #0bc3c5;
									margin-right: 5px;
								}
							}

							&:hover {
								color: #3699ff;
							}
						}

						.li-p2_intro {
							font-size: 13px;
							color: #c6c6d2;
							margin-top: 2px;
							cursor: pointer;

							i {
								font-size: 16px;
								color: #787995;
								font-weight: 800;
							}
						}
					}

					.part_li-p3 {
						font-size: 12px;
						color: #bcbac5;
						font-weight: 500;
					}
				}

				.part_li-cotx {
					padding: 0 20px;

					.li-cotx_mtion {
						color: #3f4254;
						font-size: 13px;
						line-height: 1.6;
						font-weight: 400;
						padding: 15px 0;
					}

					ul {
						li {
							font-size: 12px;
							color: #b5b5c3;
							display: flex;
							align-items: center;
							cursor: pointer;
							line-height: 23px;

							i {
								color: #ffa028;
								font-size: 16px;
								margin-right: 5px;
							}

							&:hover {
								color: #3699ff;
							}
						}
					}
				}
			}
		}
	}

	.support-right_footer {
		.footer-editor {
			position: relative;
			z-index: 999;

			.mce-stack-layout-item {
				iframe {
					height: 100px !important;
				}
			}
		}

		.editor-buts {
			padding: 0 40px;
			display: flex;
			align-items: center;
			margin-top: 20px;

			.editor-buts_left {
				min-width: 0;
				flex: 1;
				display: flex;
				align-items: center;

				.el-dropdown {
					padding: 0;
					height: 100%;
					border: none;
				}

				.buts_left-icon {
					font-size: 18px;
					color: #b5b5c3;
					cursor: pointer;
					margin-left: 15px;

					&:hover {
						color: #3699ff;
					}
				}
			}

			.editor-buts_right {
				i {
					font-size: 18px;
					color: #b5b5c3;
					cursor: pointer;
					margin-left: 15px;

					&:hover {
						color: #3699ff;
					}
				}
			}
		}
	}

	.demo-tabs {
		margin: 0;

		.demo-tabs_cxt {
			margin-top: 10px;

			.demo-tabs_xt1 {
				font-size: 16px;
				color: #333;
			}

			.demo-tabs_mark {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-top: 5px;

				.demo-tabs_mli {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;

					.demo-tabs_crilr {
						width: 8px;
						height: 8px;
						border-radius: 8px;
						background-color: red;
						position: relative;
						margin-right: 5px;

						&::after {
							content: "";
							width: 5px;
							height: 5px;
							border-radius: 5px;
							background-color: #fff;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}

					.demo-tabs_ctvt {
						font-size: 14px;
						color: #BDBDCC;
					}
				}
			}
		}
	}

	.support-right_matters {
		background-color: #f56c6c;
		border-radius: 4px;
		margin-bottom: 15px;
		padding: 10px 20px;

		.support-right_mali {
			font-size: 14px;
			color: #ffffff;
			line-height: 25px;
		}
	}

	.support-right_gul {
		border-bottom: 1px solid #F3F5F7;

		.support-right_gli {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 1px solid #F3F5F7;
			padding: 12px 5px;
			cursor: pointer;

			.support-right_gtxt {
				font-size: 14px;
				color: #202D40;
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.support-right_gicon {
				font-size: 15px;
				color: #999;
				margin-left: 10px;
			}

			&:hover .support-right_gtxt {
				color: #3699ff;
			}
		}
	}

	.support-right-mt {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;

		.support-right-buts {
			display: inline-block;
			background-color: #409eff;
			font-size: 12px;
			color: #ffffff !important;
			border-radius: 3px;
			padding: 6px 12px;
			margin-bottom: 10px;
			cursor: pointer;
			margin-left: 10px;
			&:hover{
				opacity: 0.8;
			}
		}
	}

	.content-xmarkdown {
		.divarea-wrapper {
			display: none;
		}
	}

	.x-markdown {
		.scroll-style {
			color: #24292e;
		}
	}

}